<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title >文件上传</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/* -189 是去掉左侧 菜单的宽度， -12是防止浏览器缩小页面 出现滚动条 恢复页面时 折行的问题 */
            _gridHeight = $(document).height()-65-67; /* -65 顶部主菜单高度， -67查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth / 3;
            $("#flexigrid-tabl-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{/file/queryFileInfoByPage}]]*/"",
                dataType: 'json',
                colModel: [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display: /*[[#{File.name}]]*/"", name: 'fileName', width: _columnWidth, sortable: true, align: 'center'},
                    {display: /*[[#{File.size}]]*/"", name: 'fileSize', width: _columnWidth, sortable: true, align: 'center'},
                    {display: /*[[#{common.operation}]]*/"", name: 'fileUuid', width: _columnWidth, sortable: true, align: 'center', process: function (v, trid, row) {
                            var contents = '<div style="align-items: center;justify-content: center;display: flex;flex-direction: row">';
                            var downLoadBtn =/*[[#{file.download}]]*/'';
                            contents += "<a id='download--btn-id' href='#' class='nav' style='color:#337ab7;'onclick=\"fileDownloadInfoBtn(\'" + v + "\')\"><i class='fa fa-arrow-down'></i><span>" + downLoadBtn + "</span></a>";
                            var deleteBtn = /*[[#{file.delete}]]*/'';
                            contents += "<a href='#' class='nav' style='color:#337ab7;margin-left: 10px'onclick='deleteFileInfoBtn(\"" + v + "\")'>" +
                                "<i class='fa fa-trash-o'></i><span>" + deleteBtn + "</span></a>";
                            contents += '</div>';
                            return contents;
                        }
                    },
                ],
                resizable: false, //resizable table 是否可伸缩
                useRp: true,
                usepager: true, //是否分页
                autoload: false, //自动加载，即第一次发起 ajax 请求
                hideOnSubmit: true, //是否在回调时显示遮盖
                showcheckbox: true, //是否显示多选框
                rowhandler: rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata: true

            });
            queryTable();
            //查询按钮
            $("#query-file-btn-id").click(function () {
                queryTable();
            });
        });//ready
        function queryTable() {
            var fileName = $("#search-file-name-id").val();
            var fileSize = $("#search-file-size-id").val();
            $("#flexigrid-tabl-id").flexOptions({
                extParam: [
                    {name: "fileName", value: fileName},
                    {name: "fileSize", value: fileSize}
                ]
            }).flexReload();
        }
        function fileDownloadInfoBtn(fileUuid) {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{getFileNameById}]]*/'',
                data: [{name:"fileUuid",value:fileUuid}],
                success: function (data) {
                    location.href="/cloud/file/fileDownLoadById?fileName="+data.fileName;
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/);
                }
            });

        }
    </script>
<body>
<nav class="nav-tools">
    <div sec:authorize="hasRole('ROLE_cldk_data_user_query')">

    </div>
</nav>
<table sec:authorize="hasRole('ROLE_cldk_data_file_query')" id="flexigrid-tabl-id"></table>

</body>
</html>